<template>
  <section class="grad-bg border-common px-3 py-1">
    <div class="text-main color-gray">{{ title }}</div>
    <div class="color-white text-center" :style="{ fontSize: (size || 1.875) + 'rem'}">{{ content }}</div>
  </section>
</template>

<script>

export default {
  props: {
    title: String,
    content: [String, Number],
    size: [String, Number]
  },
  data() {
    return {

    }
  }
}
</script>

<style lang="less" scoped>

section {
  width: 8.7rem;
  box-sizing: border-box;
  div {
    &:nth-of-type(2) {
      letter-spacing: 0.1rem;
      margin-top: -0.3rem;
      height: 2.4rem;
      line-height: 2.4rem;
    }
  }
}

</style>
